<template>
    <div>
      <div class="tools">
        <div>
          <el-input prefix-icon="el-icon-search" style="width: 200px;margin-right: 10px;" size="small" v-model="input" placeholder="请输入内容"></el-input>
          <el-button icon="el-icon-search" type="primary" size="small">搜索</el-button>
        </div>
        <div>
          <el-button @click="addActivity" icon="el-icon-plus" type="primary" size="small">添加</el-button>
        </div>
      </div>
      <el-table
          :data="activityData"
          style="width: 100%"
          :row-class-name="tableRowClassName">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="id"
            label="编号"
            width="180">
          <template slot-scope="scope">
            {{ scope.$index+1}}
          </template>
        </el-table-column>
        <el-table-column
            prop="activityName"
            label="活动名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="imgUrl"
            label="图片">
        </el-table-column>
        <el-table-column
            prop="createtime"
            sortable
            label="创建日期">
        </el-table-column>
        <el-table-column
            prop="updatetime"
            sortable
            label="修改日期">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="editActivity(scope.row)">编辑</el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
      <activity-oper ref="operation"></activity-oper>
    </div>
</template>

<script>
import {Message} from "element-ui";
import ActivityOperation from "@/view/activity/modules/ActivityOper";
import ActivityOper from "@/view/activity/modules/ActivityOper";

export default {
  name: "Activity",
  components: {ActivityOper},
  comments: {
    ActivityOperation
  },
  data() {
    return {
      input: '',
      //图片回显路径
      imgUrl: '',
      activityData: [],
      total: 0,
      pageSize: 0,
      pageSizes: [10, 20, 30, 40],
      currentPage: 1,
    };
  },
  mounted() {
    this.initActivityData();
  },
  methods: {
    addActivity() {
      this.$refs.operation.dialogVisible = true;
      this.$refs.operation.title = "添加";
      this.$refs.operation.clearObj(this.$refs.operation.activity)
    },
    editActivity(data) {
      this.$refs.operation.dialogVisible = true;
      this.$refs.operation.title = "编辑";
      this.$refs.operation.activity = data;
      console.log(this.$refs.operation.activity);
    },
    initActivityData() {
      this.getRequest("/activity/").then(resp => {
        if (resp.code === 200) {
          this.activityData = resp.data.records;
          this.total=resp.data.total
          this.pageSize = resp.data.pageSize;
          this.currentPage = resp.data.current;
        }
      });
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    handleSizeChange() {

    },
    handleCurrentChange() {

    },
  },
};
</script>

<style scoped>
  .tools {
    display: flex;
    justify-content: space-between;
  }

  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  .column {
    display: flex;
    align-items: center;
    margin-top: 15px;
  }
  .operation-div {
    display: flex;
    justify-content: space-around;
  }
  .pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
  }
</style>
